light mode
night mode
On This Page

সিএসএস সুডো-ক্লাস (CSS Pseudo-class)

OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

সুডো-ক্লাস কি?

একটি এলিমেন্টের বিশেষ অবস্থাকে সিলেক্ট করার জন্য সুডো ক্লাস ব্যবহার করা হয়। সুডো ক্লাস ব্যবহার করার জন্য আপনাকে কোনো অতিরিক্ত জাভাস্ক্রিপ্ট অথবা অন্য কোনো স্ত্রিপ্ট ব্যবহার করতে হবে না। উদাহরণস্বরূপ, আপনি কোনো এলিমেন্টের হোবারকে সিলেক্ট করতে চাইলে সুডো-ক্লাস :hover এর মাধ্যমে সিলেক্ট করতে হবে।

উদাহরণ হিসেবে আমরা নিচের অংশটুকু দেখতে পারিঃ

নিচের ধূসর রংয়ের বক্সের মধ্যে মাউস নিয়ে আসুন। অবাক হয়েছেন!! মাউস আনার সাথে সাথেই বক্সের রং পরিবর্তন হয়ে গেছে।

মাউস আনুন, পরিবর্তন দেখুন।

সকল সিএসএস সুডো-ক্লাস

সিলেক্টরউদাহরণবর্ণনা
:activea:activeএকটিভ লিংককে সিলেক্ট করবে।
:checkedinput:checkedযেসকল এলিমেন্ট "checked" সেট করা হয়েছে সেগুলোকে সিলেক্ট করবে।
:disabledinput:disabledযেসকল এলিমেন্ট "disabled" সেট করা হয়েছে সেগুলোকে সিলেক্ট করবে।
:emptydiv:emptyযেসকল
এলিমেন্টের কোন চাইল্ড এলিমেন্ট নেই তাদেরকে সিলেক্ট করবে।
:enabledinput:enabledপ্রত্যেকটি সক্রিয় এলিমেন্টকে সিলেক্ট করবে।
:first-childli:first-childপ্যারেন্ট এলিমেন্টের প্রথম
  • চাইল্ড এলিমেন্টকে সিলেক্ট করবে।
    • :first-of-typeli:first-of-typeপ্যারেন্ট এলিমেন্টের অন্তর্গত সবগুলো
  • এলিমেন্টের মধ্যে প্রথম
  • এলিমেন্টকে সিলেক্ট করবে।
    • :focusinput:focusফোকাসকৃত এলিমেন্টকে সিলেক্ট করবে।
    :hoverdiv:hover
    এলিমেন্টের উপর মাউসের কার্সর থাকা অবস্থাকে সিলেক্ট করবে।
    :in-rangeinput:in-rangeএকটি নির্দিষ্ট রেঞ্জের ভ্যালুসহ এলিমেন্টকে সিলেক্ট করবে।
    :invalidinput:invalidইনভ্যালিড ভ্যালুযুক্ত এলিমেন্টকে সিলেক্ট করবে।
    :langp:lang(lan)lang এট্রিবিউটের "lan" এর ভ্যালুযুক্ত সকল

    এলিমেন্টকে সিলেক্ট করে

    :last-childli:last-childপ্যারেন্ট এলিমেন্টের সর্বশেষ
  • চাইল্ড এলিমেন্টকে সিলেক্ট করবে।
    • :last-of-typeli:last-of-typeপ্যারেন্ট এলিমেন্টের অন্তর্গত সবগুলো
  • এলিমেন্টের মধ্যে সর্বশেষ
  • এলিমেন্টকে সিলেক্ট করবে।
    • :linka:linkএকটি সাধারণ আন-ভিজিটেড লিংককে সিলেক্ট করবে।
    :not(selector):not(div)
    এলিমেন্ট ছাড়া সকল এলিমেন্টকে সিলেক্ট করবে
    :nth-child(n)p:nth-child(2)প্যারেন্ট এলিমেন্টের দ্বিতীয় চাইল্ড

    এলিমেন্টকে সিলেক্ট করবে।

    :nth-last-child(n)p:nth-last-child(2)একই প্যারেন্ট এলিমেন্টের শেষের দিক থেকে দ্বিতীয় চাইল্ড

    এলিমেন্টকে সিলেক্ট করবে।

    :nth-last-of-type(n)p:nth-last-of-type(2)একই প্যারেন্ট এলিমেন্টের সবগুলো

    এলিমেন্টের মধ্যে শেষের দিক থেকে দ্বিতীয়

    এলিমেন্টকে সিলেক্ট করবে।

    :nth-of-type(n)p:nth-of-type(2)প্যারেন্ট এলিমেন্টের সবগুলো

    এলিমেন্টের মধ্যে দ্বিতীয়

    এলিমেন্টকে সিলেক্ট করবে।

    :only-of-typep:only-of-typeযদি

    এলিমেন্টটি তার প্যারেন্টের একমাত্র

    এলিমেন্ট হয় তবে তাকে সিলেক্ট করবে।

    :only-childp:only-childযদি

    এলিমেন্টটি তার প্যারেন্টের একমাত্র চাইল্ড এলিমেন্ট হয় তবে তাকে সিলেক্ট করবে।

    :optionalinput:optionalrequired এট্রিবিউট ব্যাতীত বাকি এলিমেন্টগুলোকে সিলেক্ট করবে।
    :out-of-rangeinput:out-of-rangeনির্দিষ্ট রেঞ্জের বাহিরের ভ্যালুযুক্ত এলিমেন্টকে সিলেক্ট করবে।
    :read-onlyinput:read-only"readonly" এট্রিবিউটযুক্ত এলিমেন্টকে সিলেক্ট করবে।
    :read-writeinput:read-write"readonly" এট্রিবিউট ব্যাতীত বাকি সবগুলো এলিমেন্টকে সিলেক্ট করবে।
    :requiredinput:required"required" এট্রিবিউটযুক্ত সবগুলো এলিমেন্টকে সিলেক্ট করবে।
    :rootrootডকুমেন্টের মূল(সাধারনত ) এলিমেন্টকে সিলেক্ট করবে।
    :target#news:targetসক্রিয় #news আইডি যুক্ত এলিমেন্টকে সিলেক্ট করবে।
    :validinput:validসকল ভ্যালিড ভ্যালুযুক্ত এলিমেন্টকে সিলেক্ট করবে।
    :visiteda:visitedভিজিটেড লিংককে সিলেক্ট করবে।


     

    গঠন প্রণালী

    সুডো-ক্লাস এর গঠন প্রণালীঃ

    selector:pseudo-class {
   property: value;
 }

    অ্যাঙ্কর(Anchor) সুডো-ক্লাস

    একটি লিংককে আমরা বিভিন্ন পর্যায়ে বিভিন্ন ভাবে প্রদর্শন করতে পারিঃ

    kt_satt_skill_example_id=866

    উপরের উদাহরণটিতে লিংকের বিভিন্ন অবস্থাকে সুডো-ক্লাসের মাধ্যমে সিলেক্ট করে স্টাইল করা হয়েছে। এখানে a:hover অবশ্যই a:link এবং a:visited এর পরে লিখতে হবে। তা না হলে a:hover কাজ করবে না। এছাড়া a:active কে অবশ্যই a:hover এর নিচে লিখতে হবে। তা না হলে a:hover কাজ করবে না।

    সুডো-ক্লাস এবং সিএসএস-ক্লাস

    আমরা সিএসএস ক্লাসের সাথে সুডো-ক্লাস গুলোকে একত্রে ব্যবহার করতে পারি।

    নিম্নের উদাহরণটিতে আমরা দেখবো একটি লিংকে কিভাবে হোভার যুক্ত করতে হয়ঃ

    kt_satt_skill_example_id=867

    < div> এর মধ্যে হোভার

    নিম্নের উদাহরণটিতে আমরা দেখবো কিভাবে :hover সুডো-ক্লাস ব্যবহার করে কিভাবে একটি

    এলিমেন্টের হোভারের সময় কালার পরিবর্তন করা যায়ঃ

    kt_satt_skill_example_id=868

    টুলটিপ হোভার

    নিম্নের উদাহরণে < div> এলিমেন্টটিতে হোভার করলে অনেকটা টুলটিপ আকারে একটি < p> এলিমেন্ট দেখা যাবে।

    kt_satt_skill_example_id=869

    :first-child সুডো-ক্লাস

    প্যারেন্ট এলিমেন্টের প্রথম চাইল্ডকে সিলেক্ট করতে আমরা :first-child সুডো ক্লাস ব্যবহার করবো।

    নিম্নের উদাহরণটিতে প্যারেন্ট এলিমেন্টের প্রথম চাইল্ড যদি

    এলিমেন্ট হয় তবে তাকে সিলেক্ট করবে।

    kt_satt_skill_example_id=871

    < div> এলিমেন্টের মধ্যের < p> এলিমেন্ট সিলেক্ট

    নিম্নের উদাহরণে < div> এলিমেন্টের মধ্যে অবস্থিত প্রথম < p> এলিমেন্টটি সিলেক্ট করবে।

    kt_satt_skill_example_id=872

    প্রথম চাইল্ড এলিমেন্ট < li> এর মধ্যে < span> এলিমেন্ট গুলো সিলেক্ট

    নিম্নের উদাহরণটিতে প্রথম চাইল্ড এলিমেন্ট < li> কে খুজে বের করে তার মধ্যকার < span> এলিমেন্ট গুলো সিলেক্ট করবে।

    kt_satt_skill_example_id=880

     

    Content added || updated By
    Nayan Islam

    আরও দেখুন...

    On This Page

    Promotion